VUE+ElementUI对Table的多选进行批量操作（复选框勾选删除）完整功能实现 |
您所在的位置：网站首页 › vue 选择框 › VUE+ElementUI对Table的多选进行批量操作（复选框勾选删除）完整功能实现 |
|
其实实现批量操作功能的重点在于如何取到索引值，之前懵懵懂懂不明白，想通了之后还是比较简单的。 ElementUI:选择多行数据时使用 Checkbox。当用户勾选目标信息时，会触发selection-change事件。 批量删除在method中实现handleSelectionChange方法，val为选中的数据集合。其中， multipleSelection: [],需要在data（）中声明 //获取多选的数据 handleSelectionChange(val) { this.multipleSelection = val;//存储选中的数据 console.log(val); },实现deleteSelectItem方法（批量删除按钮点击触发）。 deleteSelectItem() { this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { //遍历获得多选选中的index值 this.multipleSelection.forEach((value, index) => { //遍历多选框获取的数据 this.searchlist.forEach((v, i) => { //遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值 if (value.bianhao == v.bianhao) { this.searchlist.splice(i, 1); } }); }); this.$message({ type: "success", message: "删除成功!", }); console.log("删除成功"); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, },修改选中数据的某字段值与删除类似，找到索引号后进行操作，例如修改searchlist中选中项的状态。editSelectItem(state)中的state为需要改成的状态，比如说选中的项的状态全部改为正常那就editSelectItem(“正常”)。 editSelectItem(state) { this.$confirm("是否修改选中记录的状态?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { //遍历获得多选选中的index值 this.multipleSelection.forEach((value, index) => { //遍历多选框获取的数据 this.searchlist.forEach((v, i) => { //遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值 if (value.goodinid == v.goodinid) { this.searchlist[i].state = state } }) }) this.$message({ type: "success", message: "审核成功!", }) }) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |